
<template>
  <view class="root">
    <label
      class="fixed bgc-f7f4fc width-100vw color-1a fs-44 fw-700"
      :style="{
        boxSizing: `content-box`,
        height: `${menuButton.height}px`,
        padding: `${menuButton.top}px 30rpx 15px`,
      }"
    >
      我的社区
    </label>
    <view :style="{ height: `${menuButton.top + menuButton.height + 15}px` }" />

    <view
      v-for="(item, index) in community.lists"
      :key="index"
      @click="goto(index)"
      hover-class="btn-hover"
      class="section fd-row ai-start bgc-fff mb-24 ml-30 mr-30"
    >
      <image class="img-community br-8" :src="item.avatar" mode="aspectFill" />
      <view class="subject f1 ml-20">
        <text class="title fs-28 color-333 fw-700">{{ item.name }}</text>
        <view class="fd-row mt-16 fw-500">
          <view class="mr-10 fs-22 fd-row ai-baseline">
            <text class="color-8f9aa8">关注</text>
            <text class="color-333 ml-6 mr-6">
              {{ item.rssNum }}
            </text>
            <text class="color-8f9aa8">人</text>
          </view>
          <view class="ml-10 fs-24 fd-row ai-baseline">
            <text class="color-8f9aa8">浏览</text>
            <text class="color-333 ml-6 mr-6">
              {{ item.scanNum }}
            </text>
            <text class="color-8f9aa8">次</text>
          </view>
        </view>
      </view>
      <label v-if="item.msgNum" class="mark jc-center">
        {{ item.msgNum > 99 ? "99+" : item.msgNum }}
      </label>
    </view>
    <label v-if="tips.isShow" class="ai-center jc-center">
      <image
        v-if="tips.showIcon"
        class="width-46 height-46"
        src="/static/imgs/icon-loading.gif"
        mode="aspectFill"
      />
      <text class="color-666 fs-28 ml-18">{{ tips.text }}</text>
    </label>
    <text
      v-if="!community.lists.length && !tips.isShow"
      class="color-666 fs-28 ml-18 text-center mt-30"
    >
      您还没有关注过社区，快去加入社区吧！
    </text>
  </view>
</template>

<script>
  let requestFlag = false;
  export default {
    data: () => ({
      community: { lists: [], page: 1 },
      tips: {
        isShow: true,
        showIcon: true,
        text: "加载中...",
      },
      menuButton: uni.getMenuButtonBoundingClientRect(),
    }),
    onPullDownRefresh() {
      this.getData("refresh");
    },
    onReachBottom() {
      this.getData();
    },
    onShareAppMessage() {
      return {
        title: "我关注的社区",
        path: "/pages/community",
      };
    },
    onShareTimeline() {
      return {
        title: "我关注的社区",
        path: "/pages/community",
      };
    },
    onShow() {
      this.getData("init");
    },
    methods: {
      goto(index) {
        let item = this.community.lists[index];
        item.msgNum = 0;
        uni.navigateTo({ url: `/pages/postBar?id=${item.bid}` });
      },
      getData(mode) {
        if (mode == "refresh" || mode == "init") {
          this.community.page = 1;
          this.community.lists = [];
        }
        if (requestFlag || !this.community.page) return;
        this.tips = {
          isShow: true,
          showIcon: true,
          text: "加载中...",
        };

        uni.fetch("/api/bbs/mine", {
          data: { page: this.community.page },
          success: (res) => {
            this.community.page = res.page;
            this.community.lists.push(...res.lists);
            this.tips.isShow = false;
          },
          complete() {
            requestFlag = false;
            uni.stopPullDownRefresh();
          },
        });
      },
      subscription(index) {
        uni.fetch("/api/bbs/rss", {
          data: { bid: this.community.lists[index].bid },
          success: (res) => (this.community.lists[index].isRss = true),
        });
      },
    },
  };
</script>

<style scoped>
  .header {
    z-index: 9;
  }
  .icon {
    width: 114rpx;
    height: 114rpx;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 10rpx;
    padding: 15rpx;
  }

  .img-community {
    width: 130rpx;
    height: 130rpx;
  }

  .mark {
    height: 18px;
    min-width: 18px;
    padding: 0 3px;
    color: #fff;
    font-weight: 500;
    font-size: 24rpx;
    background: #fc5260;
    box-shadow: 0 3rpx 8rpx 0 rgba(252, 82, 96, 0.22);
    border-radius: 50%;
  }

  .subscription {
    padding: 6rpx 22rpx;
    background: linear-gradient(90deg, #8ec5fc, #4388e7);
    border-radius: 25rpx;
  }
</style>